<template>
  <div class="app-container">
    <div style="padding: 5px 0px">
      <toolbar
        :table="$refs.table"
        @add="handleEdit"
        @delete="handleDelete"
        @refresh="handleRefresh"
      >
      </toolbar>
    </div>
    <div>
      <el-table
        ref="table"
        :data="list"
        border
        fit
        :stripe="true"
        highlight-current-row
        @row-dblclick="
          (row, column, event) => {
            handleEdit(row.name);
          }
        "
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="显示名称">
          <template slot-scope="scope">
            {{ scope.row.displayName }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="同意页面">
          <template slot-scope="scope">
            {{ scope.row.consentType }}
          </template>
        </el-table-column>
        <el-table-column label="域名">
          <template slot-scope="scope">
            {{ scope.row.clientUri }}
          </template>
        </el-table-column>
        <el-table-column label="回调地址">
          <template slot-scope="scope">
            {{ scope.row.redirectUris }}
          </template>
        </el-table-column>
        <el-table-column label="退出回调地址">
          <template slot-scope="scope">
            {{ scope.row.postLogoutRedirectUris }}
          </template>
        </el-table-column>
        <el-table-column label="授权">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="400"
              trigger="hover"
              :content="scope.row.permissions"
            >
              <el-button slot="reference">详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="() => handleSetType(scope.row.name)"
              >设置类型</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="filter.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200, 500]"
        :page-size="filter.pageSize"
        :prev-click="handlePrePage"
        :next-click="handleNextPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-drawer title="client 类型" :visible.sync="showDrawer" direction="rtl">
      <type-edit v-if="showDrawer" :clientId.sync="currentClientId">
      </type-edit>
    </el-drawer>
  </div>
</template>

<script>
import toolbar from "@/components/Bar/toolbar.vue";
import typeEdit from "./typeEdit";
import { getClients, deleteClient } from "@/api/identity";
export default {
  components: {
    toolbar,
    typeEdit,
  },
  data() {
    return {
      list: null,
      filter: {
        pageIndex: 1,
        pageSize: 10,
      },
      currentClientId: null,
      total: 0,
      showDialog: false,
      showDrawer: false,
    };
  },
  mounted() {
    this.$i18n.locale = "zh_CN";
    this.$nextTick(() => {
      this.getData();
    });
  },
  methods: {
    getData() {
      getClients({
        sorting: "name",
        skipCount: (this.filter.pageIndex - 1) * this.filter.pageSize,
        maxResultCount: this.filter.pageSize,
      }).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.list = res.items;
        this.total = res.totalCount;
      });
    },
    handlePageChange(pageIndex) {
      this.filter.pageIndex = pageIndex;
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.filter.pageSize = pageSize;
      this.getData();
    },
    handleEdit(name) {
      this.$router.push({
        name: "ClientEdit",
        query: { clientId: name },
      });
    },
    handleDelete({ ids, rows }) {
      if (!rows || rows.length == 0) return;

      for (let i = 0; i < rows.length; i++) {
        deleteClient(rows[i].name).then((res) => {
          if (i == rows.length - 1) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      }
    },
    handleRefresh() {
      this.filter.pageIndex = 1;
      this.filter.pageSize = 10;
      this.getData();
    },
    handlePrePage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex - 1;
    },
    handleNextPage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex + 1;
    },
    handleSaved(res) {
      if (res) {
        this.showDialog = false;
        this.getData();
      }
    },
    handleSetType(clientId) {
      this.currentClientId = clientId;
      this.showDrawer = true;
    },
  },
};
</script>
